<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-steps :active="step-1" simple>
        <el-step title="基本信息" icon="el-icon-edit"></el-step>
        <el-step title="课程封面" icon="el-icon-edit"></el-step>
        <el-step title="销售信息" icon="el-icon-edit"></el-step>
        <el-step title="秒杀活动" icon="el-icon-edit"></el-step>
        <el-step title="课程详情" icon="el-icon-edit"></el-step>
      </el-steps>
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-form">
      <div v-show="step===1">
        <el-form-item label="名称：" prop="courseName">
          <el-input v-model="form.courseName" />
        </el-form-item>
        <el-form-item label="简介：" prop="brief">
          <el-input v-model="form.brief" />
        </el-form-item>
        <el-form-item label="讲师姓名：" prop="teacherDTO.teacherName">
          <el-input v-model="form.teacherDTO.teacherName" />
        </el-form-item>
        <el-form-item label="职位：" prop="teacherDTO.position">
          <el-input v-model="form.teacherDTO.position" />
        </el-form-item>
        <el-form-item label="讲师简介：" prop="teacherDTO.description">
          <el-input v-model="form.teacherDTO.description" />
        </el-form-item>
        <el-form-item label="课程描述：" prop="previewFirstField">
          <el-input
            v-model="form.previewFirstField"
            style="margin-bottom:10px;"
            placeholder="描述一"
           />
          <el-input
            v-model="form.previewSecondField"
            placeholder="描述二" />
        </el-form-item>
        <el-form-item label="课程排序：" prop="sortNum">
          <el-input-number
            v-model="form.sortNum"
          ></el-input-number>
        </el-form-item>
      </div>

      <div v-show="step===2">
        <el-form-item label="课程封面：" prop="courseImgUrl">
          <upload-img v-model="form.courseImgUrl"></upload-img>
        </el-form-item>
        <el-form-item label="解锁封面：" prop="courseListImg">
          <upload-img v-model="form.courseListImg"></upload-img>
        </el-form-item>
      </div>

      <div v-show="step===3">
        <el-form-item label="售卖价格：" prop="discounts">
          <el-input v-model="form.discounts">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品原价：" prop="price">
          <el-input v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="销量：" prop="sales">
          <el-input v-model="form.sales">
            <template slot="append">单</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动标签：" prop="discountsTag">
          <el-input v-model="form.discountsTag" />
        </el-form-item>
      </div>

      <div v-show="step===4">
        <el-form-item label="限时秒杀开关：" prop="activityCourse">
          <el-switch
            v-model="form.activityCourse"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <template v-if="form.activityCourse">
          <el-form-item label="开始时间：" prop="activityCourseDTO.beginTime">
            <el-date-picker
              v-model="form.activityCourseDTO.beginTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：" prop="activityCourseDTO.endTime">
            <el-date-picker
              v-model="form.activityCourseDTO.endTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="秒杀价：" prop="activityCourseDTO.amount">
            <el-input v-model="form.activityCourseDTO.amount">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="秒杀库存：" prop="activityCourseDTO.stock">
            <el-input v-model="form.activityCourseDTO.stock">
              <template slot="append">件</template>
            </el-input>
          </el-form-item>
        </template>
      </div>

      <el-form-item v-if="step===5" label="课程详情：" prop="resource">
        <text-editor v-model="form.courseDescriptionMarkDown" />
      </el-form-item>

      <el-form-item>
        <el-button v-if="step===5" type="primary" @click="submitForm">保存</el-button>
        <el-button v-if="step < 5" type="primary" @click="step++">下一步</el-button>
        <el-button v-if="step > 1" @click="step--">上一步</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCourseById, saveOrUpdate } from '@/services/course'
import UploadImg from '@/components/upload-img.vue'
import TextEditor from '@/components/text-editor.vue'

export default Vue.extend({
  name: 'MenuForm',

  props: {
    courseId: String
  },

  components: {
    UploadImg,
    TextEditor
  },

  data () {
    return {
      step: 1,
      isEdit: false,
      form: {
        id: '',
        courseName: '',
        brief: '',
        teacherDTO: {
          teacherName: '',
          description: '',
          position: ''
        },
        previewFirstField: '',
        previewSecondField: '',
        sortNum: '',
        courseImgUrl: '',
        courseListImg: '',
        discounts: '',
        price: '',
        sales: '',
        discountsTag: '',
        activityCourse: true,
        activityCourseDTO: {
          beginTime: '',
          endTime: '',
          amount: '',
          stock: ''
        },
        courseDescriptionMarkDown: ''
      },
      rules: {},
      cacheForm: {
        id: '',
        parentId: -1,
        name: '',
        href: '',
        icon: '',
        orderNum: '',
        description: '',
        shown: true
      },
      parentMenuList: []
    }
  },

  mounted () {
    this.isEdit = !!this.courseId
    this.isEdit && this.getInfo()
  },

  methods: {
    getInfo () {
      getCourseById(this.courseId).then(res => {
        if (res.data.code === '000000') {
          this.form = res.data.data
          this.form.activityCourseDTO = this.form.activityCourseDTO ||
            {
              beginTime: '',
              endTime: '',
              amount: '',
              stock: ''
            }
        }
      })
    },

    submitForm () {
      saveOrUpdate(this.form).then(res => {
        if (res.data.code === '000000') {
          this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
          this.$router.back()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped></style>
